<template>
    <van-popup 
    :show="toShow" 
    @close="onpopupClose" 
    position="bottom"
    custom-style="height: 300px"
    :close-on-click-overlay="true"
    class="comment-popuop"
    >
        <div id="reply">
            <div class="reply-header">
                <p class="reply-content" v-show="has_target">回复 <a href="" class="reply-target">{{target}}:</a>{{target_said}}</p>          
                                                                                                                                      
            </div>
            <div class="reply-input">
                <textarea
                    v-model="inputVal"
                    placeholder="请输入评论"
                    class="reply-input-box"
                    id="comment-input-box"
                >
                </textarea>
                <van-button 
                type="default"
                round
                class="reply-input-button"
                @click="submiit()"
                >
                发表
                </van-button>
            </div>
            <div class="ops">
                <van-uploader 
                v-if="has_img"
                v-model="fileList"
                @after-read="afterRead"
                max-count="3"
                :multiple="true"
                class="img-uploader"
                id="uploader">
                    <van-icon name="photo-o" size="25px"/>
                </van-uploader>
                <van-icon name="smile-o" class="emoji" size="25px" v-if="!hasImg"/>
                <van-icon name="location-o" class="loc" size="25px" v-if="!hasImg" />
                <van-icon name="point-gift-o" class="gift" size="25px" v-if="!hasImg"/>
            </div>
            
        </div>
        
    </van-popup>
</template>

<script>
import {Popup, Sticky, Field, Button, Icon, Uploader} from 'vant'
import {uploadImage} from "@/utils/uploadImage"
import {showStatusTip} from "@/utils/loginStatus.js"

export default {
    data(){
        return{
            inputVal: "",
            fileList: [

            ],
            hasImg: false
        }
    },
    components: {
        [Popup.name]:Popup,
        [Sticky.name]:Sticky,
        [Field.name]:Field,
        [Button.name]:Button,
        [Icon.name]:Icon,
        [Uploader.name]:Uploader,
    },
    props: {
      toShow: {
        type: Boolean,
        default: false
      },
      target: {
        type: String,                        
      },
      target_said: {
        type: String,                        
      },
      has_img: {
        type: Boolean
      },
      has_target: {
        type: Boolean,
        default: false
      }
    },
    methods:{
        //关闭当前输入框
        onpopupClose(){
            this.$emit('commentClose')
        },
        //提交输入的评论包括图片
        submiit(){
                let images = []
                if (this.fileList.length > 0){
                    for (let i = 0; i < this.fileList.length; i++){
                        const onUpload = async() =>{
                            let data = await uploadImage(this.fileList[i].file.name,this.fileList[i].file)
                            let res = data.url;
                            images.push(res)
                        }
                        onUpload()
                    }
                }
                if (this.fileList.length > 0){
                    setTimeout(()=>{
                        if (this.inputVal.length > 0 || images.length > 0)
                        {
                            this.$emit('commentSubmiit',  this.target, this.inputVal, images)
                            this.inputVal = ""
                            this.fileList = []
                        }
                    }, 2000)
                }
                else{
                    this.$emit('commentSubmiit',  this.target, this.inputVal, images)
                    this.inputVal = ""
                }
                
        },
        //图片上传
        afterRead(event){
            const file = event.detail;
            this.fileList.push(file)
            console.log(this.hasImg )
            this.hasImg = true
        }
    },
    emits:['commentClose', 'commentSubmiit'],
    mounted(){
    },
    watch: {
        fileList(newName, oldName) {
            if (this.fileList.length == 0)
                this.hasImg = false
            if (this.fileList.length > 0)
                this.hasImg = true
        }
    } 
}
</script>

<style scoped>
.comment-popuop{
    position: relative;
}

#reply{
    padding-bottom: 5px;
}

.reply-header{

}

.reply-content{
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; 
    width: 80%;
    text-align: left;
    margin: 0px;
    margin-left: 20px;
    margin-bottom: 10px;
}

#close-input{
    margin-top: 10px;
    margin-left: 330px;
}

.reply-input{
    display: flex;
}

.reply-input-box{

    width: 70%;
    margin-left: 5%;
    background-color: rgb(230, 230, 230);
    color: rgb(41, 41, 41);
    border-radius: 10px;
    font-size: 16px;
    border: 0px;
    padding-left: 10px;
    overflow:visible;
    word-break:break-all;
    margin-bottom: 10px;
    margin-top: 10px;
}

.reply-input-button{
    margin-left: 20px;
    background-color: #4389fc;
    font-weight: bold;
    word-break:break-all;
    margin-top: 10px;
    margin-bottom: 10px;
}

.img-uploader{
    margin-left: 30px;
    margin-top: 2px;
    margin-bottom: 2px;
}

.ops{
    color: black !important;
    text-align: left !important;
}

.emoji{
    margin-left: 50px;
}

.loc{
    margin-left: 50px;
}

.gift{
    margin-left: 50px;
}
</style>